<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            text-align: center;
        }
        canvas{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas width="600" height="600"  ></canvas>
<script>
    var cas=document.querySelector("canvas");
    var ctx=cas.getContext("2d");
    ctx.strokeRect(50,50,100,100);
    //保存当前环境
    ctx.save();
    //改变线条的颜色
    ctx.strokeStyle="red";
    //红色
    ctx.strokeRect(60,60,100,100);
    //还原
    ctx.restore();
    //黑色
    ctx.strokeRect(70,70,100,100)
</script>
</body>
</html>